<template>
  <div ref="stencil" id="stencil"></div>
</template>

<script>
import { Addon } from '@antv/x6'
import { mapState, mapActions } from 'vuex';
import { previewFile } from "@/api/file"
import { Base64 } from "js-base64";

export default {
  name: "stencil",
  data() {
    return {
      dagData: null,
      experiment_id: this.$route.query.experiment_id, //模型开发的ID
      myInfo: null,
    };
  },
  async created() {


  },
  mounted() {
    this.init()
  },
  computed: mapState({
    modelShapes: state => state.dagStore.modelShapes,
    //dagData: state => state.dagStore.dagData,
    graph: state => state.dagStore.graph
  }),
  methods: {
    ...mapActions(['assignGraph']),
    async init() {
      this.myInfo = await this.$myInfo(this)
      console.log("myInfo", this.myInfo)
      let encodedRelativePath = encodeURIComponent(Base64.encode("dagData.json"))
      let [err, res] = await this.$awaitWrap(previewFile({
        bizId: this.experiment_id,
        encodedRelativePath,
        type: "workspace",
        userId: this.myInfo.id,
        ignore: true
      }))
      console.log("bbbbbbb", err)
      console.log("cccc", res)
      this.dagData = res
      console.log("dagData", this.dagData)
      this.stencil = new Addon.Stencil({
        title: ' ',
        target: this.graph,
        stencilGraphWidth: 250,
        stencilGraphHeight: 480,
        collapsable: false,
        groups: [
          {
            title: ' ',
            name: 'group2',
            graphHeight: 540,
            collapsable: false,
            layoutOptions: {
              rowHeight: 70,
            },
          },
        ],
        layoutOptions: {
          columns: 1,
          columnWidth: 112,
          rowHeight: 55,
        },
      })

      let htmlBegin = item => {
        return `<div class="self-defined">
              <img src="${item.image}" class="self-defined-icon" />
              <p class="self-defined-word">`
      }
      let htmlTitle = item => {
        return `${item.label}`
      }
      let htmlEnd = `</p> </div>`
      this.$refs.stencil.appendChild(this.stencil.container)
      console.log("modelShape3333333s", this.modelShapes)
      this.imageNodes = this.modelShapes.map((item) =>
        this.graph.createNode({
          shape: 'my-html',
          // label: item.label,
          node_type: item.label,
          data: item.paramList,
          paramList: item.paramList,
          html: htmlBegin(item) + htmlTitle(item) + htmlEnd,
          html_begin: htmlBegin(item),
          html_title: htmlTitle(item),
          html_end: htmlEnd
        }),
      )
      this.stencil.load(this.imageNodes, 'group2')
      if (this.dagData) {
        this.graph.fromJSON(this.dagData)
      }
    }
  }
};
</script>

<style lang="less" scoped>
// @import '../../index2.less';
</style>
